<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>交互式数据可视化期末项目</title>
    <style type="text/css">
    	div.content {padding: 1em 5em;}
    	div.graph {margin: 10px auto;
    		       width: 70%;}

    </style>
    <!--导入js库文件-->
    <script type="text/javascript" src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    <link
            rel="stylesheet"
            href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
            integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
            crossorigin="anonymous"
    />

    <link
            href="http://getbootstrap.com/docs/3.4/examples/jumbotron-narrow/jumbotron-narrow.css"
            rel="stylesheet"
    />
    <link href="../static/css/signup.css" rel="stylesheet"/>
    <link rel="icon" href="/static/favicon.ico">


</head>

<body>
<div class="container" style="background-color: #e5e5e5;max-width: 90%;border-radius: 15px;padding-top: 20px;margin-top: 5%">
    <div class="header">
        <nav>
            <ul class="nav nav-pills justify-content-end">
                <li class="nav-item">
                    <a class="nav-link active" href="/">第一页面</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/page_second">第二页面</a>
                </li>
                <li rclass="nav-item">
                    <a class="nav-link" href="/page_final">最后页面</a>
                </li>
            </ul>
        </nav>
        <h3 class="text-muted">2021年轻人婚恋观图鉴：恋爱很甜，单身也香</h3>
    </div>

    <div>
        <h4 class="text-muted"></h4>
        <p>
            2021年，“七普数据”“三胎政策”引起了人们对年轻人婚恋观、家庭观的热烈讨论。那些一边围观他人的“神仙爱情”，化身“柠檬树上柠檬果”，一边又喊着“一直单身一直爽”的年轻人们，到底是怎么看待结婚生子的？
        </p>
    </div>

    <div>
        <h5 class="text-muted"></h5>
        <p>“七普”“三胎”后的第一个七夕，对年轻人关于恋爱、婚姻、家庭的真实想法发起调研，共回收有效样本4,682份</p>
        <p>数据来源：珍爱网</p>
        <div class='content'>
            <div class='graph'>
                <!--展现可视化图标部分-->
                <h1> {{context.graph |safe }} </h1>
            </div>
        </div>
    </div>

    <div>
        <h5 class="text-muted"></h5>
        <p>数据来源：珍爱网</p>
        <div class='content'>
            <div class='graph'>
                <!--展现可视化图标部分-->
                <h1> {{context.graph2 |safe }} </h1>
            </div>
        </div>
    </div>

    <div>
        <h4 class="text-muted"></h4>
        <p>
            当代年轻人恋爱观：期待对的TA出现，但也享受一个人的生活

95.3%的年轻人期待一段甜甜的恋爱，希望爱情自然发生和想尽快脱单都是单身青年的心声。而对于少数不期待爱情的人来说，除了顾虑谈恋爱的时间和金钱成本，享受自己的生活节奏、不愿意被他人打乱是最大原因。脱单难仍然是年轻人面临的一个现实问题，近三分之一的调研用户单身时长超过3年，男生的空窗期平均比女生更长。数据显示，参与调研的用户中有61.99%的人认为脱单难的主要原因包括圈子小、49.84%的人认为没遇到喜欢的人不想将就、45%的人表示自己在恋爱中不够主动，难以把握机会。


        </p>
    </div>

    <footer class="footer">
        <p>何健豪 广州南方学院 网络与新媒体专业</p>
    </footer>
</div>
</body>
</html>

<style>
    body{
        background: url("https://bing.ioliu.cn/v1/rand") ;
        background-size: 100% 100%;
    }
</style>